<template>
<div class="TVChartContainer" :id="containerId" />
</template>

<script>

import { widget } from '../charting_library.min';

function getLanguageFromURL() {
  const regex = new RegExp('[\\?&]lang=([^&#]*)');
  const results = regex.exec(window.location.search);
  return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

export default {
  name: 'TVChartContainer',
  props: {
    symbol: {
      default: 'BTC/USDT',
      type: String,
    },
    interval: {
      default: '1',
      type: String,
    },
    containerId: {
      default: 'tv_chart_container',
      type: String,
    },
    libraryPath: {
      default: '/charting_library/',
      type: String,
    },
    fullscreen: {
      default: false,
      type: Boolean,
    },
    autosize: {
      default: true,
      type: Boolean,
    },
    studiesOverrides: {
      type: Object,
    }
  },
  mounted() {
    window.ws = new WebSocket("ws://47.105.49.33:8090");

    window.WSInterval = setInterval(() => {
      if (window.ws && window.ws.readyState === 1) {
        try {
          const params = {"method":"server.ping","params":["BTC/USDT"],"id":0};
          window.ws.send(JSON.stringify(params));
        } catch(e) {
          console.error(`WSInterval has error: ${e}`)
        }
      }
    }, 1000 * 10);
    const widgetOptions = {
      symbol: this.symbol,
      // BEWARE: no trailing slash is expected in feed URL
      datafeed: new window.Datafeeds.UDFCompatibleDatafeed(),
      interval: this.interval,
      container_id: this.containerId,
      library_path: this.libraryPath,

      locale: "zh",
      theme: 'Dark',
      favorites: {
        intervals: ['1', '5', '15', '30', '60', '1D', '7D']
      },
      disabled_features: [
        'header_symbol_search',
        'symbol_search_hot_key',
        'header_compare',
        'header_undo_redo',
        'header_screenshot',
        'timeframes_toolbar',
        'context_menus',
        'volume_force_overlay'
      ],
      enabled_features: [
        'hide_last_na_study_output',
        'keep_left_toolbar_visible_on_small_screens',
        'hide_left_toolbar_by_default',
        'move_logo_to_main_pane',
        'adaptive_logo'
      ],
      fullscreen: this.fullscreen,
      autosize: this.autosize,
      studies_overrides: this.studiesOverrides,
    };

    const tvWidget = new widget(widgetOptions);
  }
}
</script>

<style lang="scss" scoped>
.TVChartContainer {
  height: calc(100vh - 80px);
}
</style>
